@import "../../../assets/iconfont/iconfont";
@import "../../styles/mixins";
@import "../../styles/input";

cc-dropdown-select {
	display: inline-block;
	vertical-align: middle;
}
.dropdown-select {
	position: relative;
	min-width: 64px;
	max-width: 280px;
	vertical-align: middle;

	.dropdown-select-input-wrap {
		display: flex;
		background-color: #fff;
		border: solid 1px $input-border-color;
		align-items: center;

		@at-root .active#{&} {
			border-color: $input-active-border;
		}

		@at-root .disabled#{&} {
			background-color: #eee;
			border: solid 1px #ccc;
		}

		.dropdown-select-input {
			flex: 1;
			min-width: 0;
			height: calc(#{$control-height} - 2px);
			line-height: calc(#{$control-height} - 2px);
			padding-right: 0;
			vertical-align: top;
			border: none;
			background-color: inherit;
			// TODO: input 字体大小应该在基础组件中写？
			font-size: 12px;
			&[readonly] {
				user-select: none;
			}
		}

		.dropdown-select-icons {
			display: inline-block;
			background-color: inherit;
		}

		%action-icon {
			@extend .iconfont;
			display: inline-block;
			padding-left: 8px;
			line-height: calc(#{$control-height} - 2px);
			cursor: pointer;
			color: #c9c9c9;
			&:last-child {
				padding-right: 8px;
			}
			&:hover, .active > & {
				color: $input-active-border;
			}
		}

		.dropdown-select-clear {
			@extend %action-icon;
			@extend .icon-clear;
			font-size: 12px;
			display: inline-block;
			visibility: hidden;
			:hover > &.visible {
				visibility: visible;
			}
		}
		.dropdown-select-down {
			@extend %action-icon;
			@extend .icon-arrow;
			font-size: 12px;
		}
	}

  	.dropdown-select-input-wrap.has-icon {
	  	padding-left: 9px;

	  	input {
		  padding-left: 4px;
		}
	}

	.dropdown-panel {
		.dropdown-list {
			position: absolute;
			top: 100%;
			left: 0;
			z-index: 1;
			box-sizing: border-box;
			min-width: 100%;
			max-width: 150%;
			max-height: 152px;
			overflow-y: auto;
			padding: 0;
			list-style: none;
			border: solid 1px $input-border;
			background-color: #fff;
			li {
				@include cut-long-text;
				display: flex;
				align-items: center;
				box-sizing: border-box;
				height: 30px;
				line-height: 1;
				padding: 0 9px;
				font-size: 12px;
				background: #fff;
				cursor: pointer;
				&.focus, &:hover {
					background-color: #f6f6f6;
				}
				&.empty-list-item {
					cursor: default;
					&:hover {
						background-color: #fff;
					}
				}
				.highlight {
					color: #0083ba;
				}
			}
		}
	}
}

